﻿@page "/login"
@layout LoginLayout
@using BlazorApp.Auth

@inject NavigationManager NavigationManager
@inject MessageService MsgService
@inject IAuthService AuthService

<div class="page login-page">
    <div class="container">
        <div class="form row">
            <ValidateForm Model="@LoginData" OnValidSubmit="@OnLogin" class="form-horizontal offset-sm-2 offset-md-2">
                <div class="col-sm-8 col-md-8">
                    <h1 class="form-title text-center">管理后台</h1>
                    <div class="form-group">
                        <!--        用户名图标和用户名输入框            -->
                        <i class="fa fa-user" aria-hidden="true"></i>
                        <BootstrapInput @bind-Value="@LoginData.Account" ShowLabel="false" IsAutoFocus="true" placeholder="请输入用户名" />
                    </div>
                    <!--        密码图标和密码输入框                -->
                    <div class="form-group">
                        <i class="fa fa-key" aria-hidden="true"></i>
                        <BootstrapInput @bind-Value="@LoginData.Password" ShowLabel="false" type="password" placeholder="请输入密码" />
                        <!-- <input class="form-control" type="password" name="password" id="password" placeholder="请输入密码" required> -->
                    </div>
                    <!--         登录按钮           -->
                    <div class="form-group text-center" style="padding-top:14px;">
                        <Button Text="登录" ButtonType="ButtonType.Submit" class="btn btn-success" Icon="fa fa-fw fa-fa" IsAsync="true" />
                    </div>
                    <!--        用超链接跳转到注册页面               -->
                    <div class="form-group text-center" style="padding:10px;">
                        <a href="/register">没有账号？立即注册</a>
                    </div>
                </div>
            </ValidateForm>
        </div>
    </div>
</div>

<Message @ref="MessageElement" />

@code {

    private Message? MessageElement { get; set; }

    private LoginRqtDto LoginData = new();

    private async Task OnLogin(EditContext context)
    {
        var result = await AuthService.Login(LoginData);
        if (!result)
        {
            MessageElement.SetPlacement(Placement.Top);
            await MsgService.Show(new MessageOption()
                {
                    Host = MessageElement,
                    Content = "帐号或密码错误！",
                    Icon = "fa fa-info-circle",
                    Color = Color.Danger
                });
            return;
        }
        MessageElement.SetPlacement(Placement.Bottom);
        await MsgService.Show(new MessageOption()
            {
                Host = MessageElement,
                Content = "登录成功！",
                Icon = "fa fa-info-circle",
                Color = Color.Success
            });
        NavigationManager.NavigateTo("/");
    }
}